<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/public.css">
  <link rel="stylesheet" href="../css/goods.css">
  <script src="../js/vue.js"></script>
  <script src="../js/axios.js"></script>
  <script src="../js/jquery-1.10.1.min.js"></script>
</head>
<style>
  .active {
    background-color: aqua;
  }

  .skip {
    width: 50px;
    height: 34px;
  }

  .homeback {
    background-color: white;
    border: none;
    border: 1px gray solid;

  }
</style>

<body>
  <header class="header"></header>

  <div class="content">
    <div class="banner">
      <nav>
        <div class="navOne">
          <ul>
            <li>
              <h4> <a href="">秋季新品</a></h4>
            </li>

            <li class="navBar">
              <h4 class="OneBtn">女士</h4>
              <div class="listOne">
                <span><a href="">T恤/上衣</a></span>
                <span><a href="">POLO衫</a></span>
                <span><a href="">卫衣</a></span>
                <span><a href="">外套</a></span>
                <span><a href="">裤装</a></span>
                <span><a href="">休闲衫</a></span>
                <span><a href="">运动鞋</a></span>
                <span><a href="">包包附配饰</a></span>
              </div>
            </li>

            <li class="navBar">
              <h4>男士</h4>
              <div class="listOne">
                <span><a href="">T恤/上衣</a></span>
                <span><a href="">POLO衫</a></span>
                <span><a href="">卫衣</a></span>
                <span><a href="">外套</a></span>
                <span><a href="">裤装</a></span>
                <span><a href="">休闲衫</a></span>
                <span><a href="">运动鞋</a></span>
                <span><a href="">包包附配饰</a></span>
              </div>
            </li>
            <li class="navBar">
              <h4>儿童</h4>
              <div class="listOne">
                <span><a href="">男童-服装</a></span>
                <span><a href="">男童-鞋类</a></span>
                <span><a href="">男童-包包附配品</a></span>
                <span><a href="">女童-服装</a></span>
                <span><a href="">女童-鞋类</a></span>
                <span><a href="">女童-包包附配品</a></span>
              </div>
            </li>
            <li>
              <h4 class="fusion">FUSION</h4>
            </li>
          </ul>
        </div>
        <div class="navTwo">
          <ul>
            <li>
              <a href="">帮助中心</a>
            </li>
            <li>
              <a href="">+购物中心</a>
            </li>
            <li>
              <a href="">+关于FILA</a>
            </li>
            <li>
              <a href="">+工作机会</a>
            </li>
          </ul>
        </div>
      </nav>
      <div class="listWrap">
        <div class="list-body">
          <!-- Top-left -->
          <div class="list-body-l fl">
            <div class="cate-title">
              所有商品
              <!-- <span>(1057)</span> -->
            </div>
          </div>
          <!-- Top-right -->
          <div class="list-body-r fr">
            <div class="result-count">
              从<input type="number" v-model="start">到<input type="number" v-model="end">
            </div>
            <div class="selector-open">筛选</div>
            <div class="filter-order" @click="appear">
              <P class="filter-orderBtn dropdown-btn">新品排序</P>
              <ul class="filter-list dropdown-menu" v-show="flag">
                <li class="orderCol">
                  <a href="Javascript:;"><input type="radio" name="sort" value="id" v-model="sort">新品排序</a>
                </li>
                <li class="orderCol">
                  <a href="Javascript:;"><input type="radio" name="sort" value="goodsprice" v-model="sort">价格排序</a>
                </li>
                <li class="orderType">
                  <a href="Javascript:;"><input type="radio" name="order" value="asc" v-model="order">升序</a>
                </li>
                <li class="orderType">
                  <a href="Javascript:;"><input type="radio" name="order" value="desc" v-model="order">降序</a>
                </li>
              </ul>
            </div>
          </div>
          <!-- 商品列表 -->
          <ul class="goods-list">
            <li class="goods-item" v-for="(item,index) in list" :key="item.id" @click="gotoDetail(item.id)">
              <div class="goods-body">
                <a class="goods-pic" href="javascript:;"><img ref='img' :src="item.goodsimg" alt=""></a>
                <a class="goods-name ellipsis" href="">{{item.goodsname}}</a>
                <div class="goods-thumbs">
                  <ul class="thumbs-list">
                    <li v-for="newitem in list[index].goodsimglist.split('|')" :key="newitem.id"
                      @click="imgListBtn(item,index)">
                      <a href="javascript:;"><img :src="newitem" alt=""></a>
                    </li>
                  </ul>
                </div>
                <a href="" class="goods-price"><span>￥{{item.goodsprice}}</span></a>
              </div>
            </li>
          </ul>
          <div class="list-bottom fr">
            <div class="listPage">
              <div class="page-select">
                <button class="homeback" @click="homePage">首页</button>
                <div class="page-select-btn dropdown-btn" v-for="item in pageList" :key="item"
                  :class="{active:item==page}" @click="setPage(item)">
                  {{item}}</div>
                <input type="text" v-model="skip" class="skip">
                <button class="homeback" @click="backPage">尾页</button>
              </div>
              <a href="javascript:;" class="page-btn page-prev-btn" v-if="page>1" @click="prev"></a>
              <a href="javascript:;" class="page-btn page-prev-btn" v-else disabled="disabled"></a>
              <span>{{page}}/{{maxPage}}页</span>
              <a href="javascript:;" class="page-btn page-next-btn" v-if="page<maxPage" @click="next"></a>
              <a href="javascript:;" class="page-btn page-next-btn" v-else disabled="disabled"></a>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>



  <header class="footer"></header>

</body>

<script>
  $(".header").load("header.html");
  $(".footer").load("footer.html");

  new Vue({
    el: ".content",
    data: {
      list: [],
      img: "https://gd1.alicdn.com/imgextra/i4/1638542801/O1CN01Ih08431WYu5Kz1Pjw_!!1638542801.jpg_400x400.jpg",
      sort: "id",
      order: "asc",
      flag: false,
      page: 1,
      limit: 4,
      start: "",
      end: "",
      timer: null,
      total: "",
      maxPage: 0,
      pageList: [],//里面放需要显示的页码
      showpage: 5,//连续出现的页面是五个
      skip: 1,
    },
    created() {
      this.search();
    },
    watch: {
      skip() {//输入跳转
        if (this.skip < this.maxPage) {
          this.page = this.skip * 1;
        } else {
          alert("亲,已经超出最大页了哦")
        }
      },
      sort() {
        this.page = 1;
        this.search();
      },
      order() {
        this.page = 1;
        this.search();
      },
      start() {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.page = 1;
          this.search();
        }, 1000)
      },
      end() {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.page = 1;
          this.search();
        }, 1000)
      },
      page() {
        this.search();
      }
    },
    methods: {

      homePage() {//首页
        this.page = 1;
      },
      backPage() {//尾页
        this.page = this.maxPage;
      },
      setPage(page) {
        this.page = page;
      },
      imgListBtn(src, index) {
        console.log(src, index);
        // console.log(src);
        console.log(src);
        this.$refs.img[index].src = src.goodsimg
        this.img = src.replace("50x50", "250x250");
        // console.log(111);
      },
      appear() {
        this.flag = !this.flag;
      },
      prev() {
        this.page--;
        this.search();
      },
      next() {
        this.page++;
        this.search();
      },
      gotoDetail(id) {
        window.location.href = "../html/details.html?id=" + id;
      },
      async search() {
        let params = {
          _sort: this.sort,
          _order: this.order,
          _page: this.page,
          _limit: this.limit,
        };

        if (this.start) {
          params.goodsprice_gte = this.start * 1;
        };
        if (this.end) {
          params.goodsprice_lte = this.end * 1;
        }

        let { data: list } = await axios({
          method: "get",
          url: "http://localhost:2345/goods",
          params
        })
        this.list = list;//第一个页的数据集合

        //把params中的分页的条件删除
        delete params._page;
        delete params._limit;
        //解决翻页翻到最后的bug
        let { data: pagelist } = await axios({
          method: "get",
          url: "http://localhost:2345/goods",
          params
        })
        this.total = pagelist.length;//获取查询条件一共有多少条数据
        this.maxPage = Math.ceil(this.total / this.limit)//得到最大的页码
        let middNum = Math.ceil(this.showpage / 2);

        this.pageList.length = 0;//先把数组清空

        let start = 1;
        let end = this.maxPage > this.showpage ? this.showpage : this.maxPage;

        //页码的中间
        if (this.page > middNum) {//大于中间数   7
          start = this.page - middNum + 1;//7-3+1
          end = this.page + middNum - 1;//7+3?-1
        }
        //页码在末尾的时候
        if (this.page > this.maxPage - middNum) {
          start = this.maxPage - this.showpage + 1;
          end = this.maxPage;
        }

        start = start > 1 ? start : 1;
        for (let i = start; i <= end; i++) {
          this.pageList.push(i);
        }
      },
    },
  })
</script>


</html>